import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import defaultHead from "@images/sex1.webp";
import SvgIcon from "@components/SvgIcon";
import { useNavigate, useLocation } from "react-router-dom";
import InfoCard from "./infoCard";
import { profile } from "@depjs/storage";
import { connect } from "react-redux";
import { selectItemNameShowChatHead } from "@redux/actions02";

const AsideDomin = (props) => {
    const { selectItemNameShowChatHead } = props;

    const navigate = useNavigate();
    const locate = useLocation();
    const [isShowCard, setIsShowCard] = useState(false);

    useEffect(() => {
        document.onclick = function () {
            setIsShowCard(false);
        };
    }, []);

    return (
        <div className={styles.aside_domin}>
            <div
                className={styles.user_head}
                onClick={(e) => {
                    e.stopPropagation();
                    setIsShowCard(true);
                }}
            >
                <img
                    src={
                        profile?.avatarUrl
                            ? require(`@images/head/${profile.avatarUrl}`)
                            : defaultHead
                    }
                    alt=""
                />
            </div>
            <div
                className={styles.chat}
                title="聊天"
                onClick={() => {
                    if (!locate.pathname.includes("/web-chat/chat/")) {
                        navigate("/web-chat/chat/mask");
                        selectItemNameShowChatHead("");
                    }
                }}
            >
                <SvgIcon
                    font={
                        locate.pathname.includes("/web-chat/chat/")
                            ? "icon-wechat2"
                            : "icon-wechat"
                    }
                />
            </div>
            <div
                className={styles.address_book}
                title="通讯录"
                onClick={() => {
                    navigate("/web-chat/address-book/mask");
                    selectItemNameShowChatHead("");
                }}
            >
                <SvgIcon
                    font={
                        locate.pathname.includes("/web-chat/address-book")
                            ? "icon-tongxunlu1"
                            : "icon-tongxunlu"
                    }
                />
            </div>
            <div className={styles.collect} title="收藏">
                <SvgIcon font="icon-shoucang" />
            </div>
            <div className={styles.chat_files} title="聊天文件">
                <SvgIcon font="icon-a-wenjianjiawenjian" />
            </div>
            <div className={styles.moments} title="朋友圈">
                <SvgIcon font="icon-pengyouquan" />
            </div>
            <div className={styles.channels} title="视频号">
                <SvgIcon font="icon-curve" />
            </div>
            <div className={styles.have_search} title="搜一搜">
                <SvgIcon font="icon-souyisou-copy" />
            </div>
            <div className={styles.applet_panel} title="小程序面板">
                <SvgIcon font="icon-xiaochengxu" />
            </div>
            <div className={styles.phone} title="手机">
                <SvgIcon font="icon-shouji_o" />
            </div>
            <div className={styles.more} title="更多">
                <SvgIcon font="icon-wangzhantubiaoji2_huaban1fuben5" />
            </div>
            {isShowCard ? <InfoCard setIsShowCard={setIsShowCard} /> : null}
        </div>
    );
};

export default connect((state) => state, { selectItemNameShowChatHead })(
    AsideDomin
);
